/*
 * 产品试妆次数列表展开内容
 * @Author: ljb
 * @Date: 2018-08-14 14:45:54
 * @Last Modified by: ljb
 * @Last Modified time: 2018-08-14 16:48:17
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .store-block {
        padding: 10px;
        margin-bottom: 20px;
        font-size: 15px;
        box-sizing: border-box;
        box-shadow: 1px 1px 1px 1px #f0f0f0;
        background-color: #fff;
        .store-info {
            padding-bottom: 10px;
            margin-bottom: 5px;
            border-bottom: 1px solid #f0f0f0;
        }
        .store-device {
            padding-left: 40px;
        }
    }

    .no-data {
        text-align: center;
        color: #ccc;
    }

</style>
<template>
	<Row>
		<i-col
			v-for="store in stores"
			:key="store.id"
			span="24"
			class="store-block">
			<Row class="store-info">
				<i-col :span="10">{{ $t('home.title') + $t('common.colon') + store.name }}</i-col>
				<i-col :span="2">{{ ($t('home.try_on_num') + $t('common.colon') + store.try_on) || 0 }}</i-col>
			</Row>
			<div v-if="store.count_device_accounts && store.count_device_accounts.length > 0">
				<p class="store-device">{{ $t('home.store_device') + $t('common.colon') }}</p>
				<Row
					v-for="device in store.count_device_accounts"
					:key="device.id">
					<i-col
						:push="1"
						:span="10">{{ $t('home.device_account') + $t('common.colon') + (device.device_name || $t('common.unknown')) }}</i-col>
					<i-col :span="2">{{ $t('home.try_on_count') + $t('common.colon') + (device.try_on || 0) }}</i-col>
				</Row>
			</div>
			<Row v-else>
				<i-col
					:span="24"
					class="no-data">{{ $t('common.no_data') }}</i-col>
			</Row>

		</i-col>
		<i-col
			v-if="stores.length === 0 || !stores"
			:span="24"
			class="no-data">{{ $t('common.no_data') }}</i-col>
	</Row>
</template>

<script>
export default {
	name: 'ProductExpand',
	props: {
		stores: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {

		};
	},
	methods: {

	},
};
</script>
